<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>ESLLET | Log in</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Font Awesome -->
  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">-->
  <!-- Ionicons -->
  <!--<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">-->
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
  <!-- Google Font: Source Sans Pro -->
  <!--<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">-->
</head>
<body class="hold-transition login-page" ng-app="ESL">
<div class="login-box" ng-controller="login">
  <div class="login-logo">
    <a href="/"><b>ESL</b>LET</a>
  </div>
  <!-- /.login-logo -->
  <div class="card">
    <div class="card-body login-card-body">
      <p class="login-box-msg" th:text="#{app.login_title}">Sign in to start your session</p>
      <span ng-show="!notShow" th:if="${param.error!=null&& session.SPRING_SECURITY_LAST_EXCEPTION!=null}" style="color:red" th:text="${session['SPRING_SECURITY_LAST_EXCEPTION'].message}"></span>
      <span ng-show="errorCheck" ng-text="errorMsg" style="color:red">{{errorMsg}}</span>
      <form action="/login/form" method="post" id="loginForm">

        <div class="form-group has-feedback">
          <input type="text" ng-keyup="checkKeyup($event)"  class="form-control" ng-model="username" name="username" th:placeholder="#{app.username}">
          <span class="fa fa-envelope form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="password" ng-keyup="checkKeyup($event)" class="form-control" ng-model="password"  name="password" th:placeholder="#{app.password}">
          <span class="fa fa-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="text" ng-keyup="checkKeyup($event)"  name="verifyCode" ng-model="verifyCode" placeholder="验证码"/>
          <img alt="验证码" onclick="this.src='/pin/verify_code?d='+new Date()*1" src="/pin/verify_code" />
        </div>
        <div class="row">

          <!-- /.col -->
          <div class="col-4">
            <button type="button"  ng-click="formOnClick()" class="btn btn-primary btn-block btn-flat" th:text="#{app.login}">登录</button>
          </div>
          <!-- /.col -->
        </div>
        <!--<input type="hidden"  th:name="${_csrf.parameterName}"   th:value="${_csrf.token}"/>-->
      </form>


      <!-- /.social-auth-links -->


    </div>
    <!-- /.login-card-body -->
  </div>
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- iCheck -->
<script src="../../plugins/iCheck/icheck.min.js"></script>
<script th:src="@{/js/angular.min.js}"></script>
<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass   : 'iradio_square-blue',
      increaseArea : '20%' // optional
    })
  })
      var eslApp=angular.module('ESL',[])
      eslApp.controller('login',function ($scope,$http) {

      $scope.checkKeyup=function (e) {

          var keycode = window.event?e.keyCode:e.which;
          if(keycode==13){
              $scope.formOnClick();
          }
      }


         $scope.formOnClick=function () {
             // $("#loginForm").submit()
             // return;
             if(!$scope.username||$scope.username.length<4){
                 $scope.errorMsg="用户名输入错误"
                 $scope.errorOrNot=true;
                 $scope.notShow=true
                 return;
             }
             if(!$scope.password||$scope.password.length<6){
                 $scope.errorMsg="密码输入错误"
                 $scope.errorOrNot=true;
                 $scope.notShow=true
                 return;
             }
             if(!$scope.verifyCode||$scope.verifyCode.length<4){
                 $scope.errorMsg="验证码输入错误"
                 $scope.errorOrNot=true;
                 $scope.notShow=true
                 return;
             }
             $("#loginForm").submit()
         };


         $scope.errorCheck=function () {
             var x=[[${param.error}]]
             console.log("x="+x)
             return !x&&$scope.errorOrNot;
         }


      })

</script>
</body>
</html>
